<template>
    <section>
        <p></p>
        <global-form class="main-box">
            <global-form-item label="开始时间:">
                <el-date-picker v-model="Date.now()" type="date" placeholder="选择日期" style="width: 160px;"></el-date-picker>
            </global-form-item>
            <global-form-item label="结束时间:">
                <el-date-picker v-model="Date.now()" type="date" placeholder="选择日期" style="width: 160px;"></el-date-picker>
            </global-form-item>
            <global-form-item label="关键字:">
                <el-input style="width: 160px;"></el-input>
            </global-form-item>
            <global-form-item>
                <el-button type="primary" :loading="true">加载中</el-button>
            </global-form-item>
        </global-form>
        <div class="main-box">
            <p>有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
                分类: javascript插件,vue,项目笔记
                好文要顶 关注我 收藏该文    
                zhaobao1830
                关注 - 7
                粉丝 - 14
                +加关注
                0 0
                « 上一篇：--save-dev --save 的区别
                » 下一篇：Object.assign()方法
                posted @ 2017-07-14 17:04 zhaobao1830 阅读(4026) 评论(0) 编辑 收藏
                刷新评论刷新页面返回顶部
                注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。
                相关博文：
                · velocity.js的使用
                · velocity.js 中文文档 (教程)
                · Velocity.js动画库使用
            </p>
            <h4 style="color: #fd6f42;padding-bottom: 15px;">待办事项</h4>
            <el-table show-header :data="tableData" style="width: 100%;border: 1px solid #ebeef5;border-bottom: 0 none;" :header-cell-style="{background:'#f8f8f9'}">
                <el-table-column prop="title" align="center" label="标题"></el-table-column>
                <el-table-column prop="createDate" align="center" label="创建时间"></el-table-column>
                <el-table-column prop="targetDate" align="center" label="预计时间"></el-table-column>
                <el-table-column prop="isOk" align="center" label="是否延期">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isOk" type="danger">延期</el-tag>
                        <el-tag v-else type="success">完成</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </section>
</template>
<script>
import {Button, Input, DatePicker, Table, TableColumn, Tag} from 'element-ui';
export default {
    name: 'tasks',
    data() {
        return {
            tableData: [
                {
                    title: '编写测试用例',
                    createDate: Date.now(),
                    targetDate: Date.now(),
                    isOk: false
                },
                {
                    title: '筹备架构方案',
                    createDate: Date.now(),
                    targetDate: Date.now(),
                    isOk: true
                },
                {
                    title: '开发基础功能',
                    createDate: Date.now(),
                    targetDate: Date.now(),
                    isOk: false
                },
                {
                    title: '反思',
                    createDate: Date.now(),
                    targetDate: Date.now(),
                    isOk: false
                }
            ]
        };
    },
    created() {},
    components: {
        elButton: Button,
        elInput: Input,
        elDatePicker: DatePicker,
        elTable: Table,
        elTableColumn: TableColumn,
        elTag: Tag
    }
};
</script>